<script >
export default{
  data(){
    return{
        list:JSON.parse(localStorage.getItem('list')) || [],
        title:'',
        date:'',
        id:'',
        flag:false,
        currentIndex:0
    }
  },
  methods:{
 
    add(){
      if(this.title === '' || this.date === ''){
        alert('请填写完整')
        return
      }
      if(this.flag){
        this.list.find(el=>el.id===this.id).title = this.title
        this.list.find(el=>el.id===this.id).date = this.date
        this.flag = false

      }else{
        this.list.splice(0,0,{
        title:this.title,
        date:this.date,
        id: Date.now()
      })
      }
     
   
    },
    del(index){
      this.list.splice(index,1)
    },
    edit(id){
      this.flag = true
      this.title= this.list.find(el=>el.id===id).title
      this.date= this.list.find(el=>el.id===id).date
      this.id = id
    },
    reset(){
      this.title = ''
      this.date = ''
    },
    onscroll(e){
      const scrollTop = e.target.scrollTop
      this.currentIndex = Math.floor(scrollTop / 30)
    }
  },
  watch:{
    list:{
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      },
      deep:true
    }
  },
  computed:{
    displayArr(){
      return this.list.slice(this.currentIndex,this.currentIndex+10)
    }
  }
}

</script>

<template>
            <label for="name">标题</label>
            <input type="text" v-model="title">
            <label for="date">日期</label>
            <input type="date" v-model="date" >
            <br>
            <button @click="add">提交</button>
            <button @click="reset">重置</button>
        <table>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{ item.title }}</td>
                    <td>{{ item.date }}</td>
                    <td>
                        <button @click="edit(item.id)">编辑</button>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="width: 700px;">
            <div>
                <div id="thead">
                    <span>标题</span>
                    <span>日期</span>
                    <span>操作</span>
                </div>
            </div>
            <div id="display" @scroll="onscroll">
              <div :style="{height:list.length*30+'px'}">
                <div :style="{height:currentIndex*30+'px'}"></div>
                <div id="tbody" v-for="(item,index) in displayArr" :key="item">
                    <span>{{ item.title }}</span>
                    <span>{{ item.date }}</span>
                    <span>
                        <button @click="edit(item.id)">编辑</button>
                        <button @click="del(index)">删除</button>
                    </span>
                </div>
              </div>
            </div>
        </div>
</template>

<style >
#thead span {
  display:inline-block;
  text-align: center;
  width: 200px;
 font-size: 20px;
 font-weight: 700;
 color: black;

}
#tbody span {
  display:inline-block;
  text-align: center;
  width: 200px;
  font-size: 20px;
}
#display{
  overflow-y: auto;
  height: 300px;
}





</style>
